<template>
<transition
  name="custom-classes-transition"
  enter-active-class="animated fadeInDown"
  leave-active-class="animated fadeOutUp"
  >
  <div class="modal-ctrl-body" v-show="s_modalShow" >
    <div class="modal-ctrl-main even-row-ctrl">
      <div class="modal-title">
        <p v-text="dialogObj.title"></p>
      </div>
      <div class="modal-ctrl-content">
        <div class="even-row">
          <div class="modal-row">
            <div class="modal-form-key f-l indispensable" v-text="dialogObj.inpName"></div>
            <input class="modal-text f-l" type="text" v-model="inputPicName" />
          </div>
          <div class="modal-row" v-show="dialogObj.isLink">
            <div class="modal-form-key f-l indispensable" v-text="dialogObj.inpUrlName"></div>
            <input class="modal-text f-l" type="text" v-model="inputUrl" />
          </div>
        </div>
      </div>
      <input type="file" name="tupian" @change="uploadChange($event)" ref="upload_file" style="display: none;" />
      <div class="picture-swrapper">
        <div class="picture" @click="upload" v-show="!dialogObj.isLink">
          <img class="item-pic" :src="preSrc" alt="">
          <div class="shade" v-show=" dialogObj.shade != ''">{{dialogObj.shade}}</div>
        </div>
      </div>
      <div class="btns text-r">
        <button type="button"
                class="btn btn-default"
                @click="closeClick" >
          取消
        </button>
        <button type="button"
                class="btn btn-default"
                :disabled="isDisable"
                @click="uploadPic" >
          确认
        </button>
      </div>
    </div>
  </div>
</transition>
</template>

<script>

import { pictureUpLoad } from '@/api/fileCenter';
import { addPic, postAddPicture, updatePicture  } from '@/api/picPool';
// import { addLink, editLink } from '@/api/matter';

export default {
  name: 'picDialogAddRevise',
  props: {
    picDialogAddReviseShow:{
      type: Boolean,
      default: false
    },
    dialogObj: Object
  },
  data(){
    return {
      s_modalShow: false,
      inputPicName: this.dialogObj.placeholder,      //输入框的值新增图片名称或者新增链接名称
      inputUrl: this.dialogObj.placeholderUrl,                                    //输入链接地址
      preSrc: this.dialogObj.src,                    //上传图片预览
      files: "",
      src: "",
      updateTime: "",
      createTime: "",
      isDisable: false
    }
  },
  created() {
  },
  methods: {
    anyClick() {
      this.s_modalShow = !this.s_modalShow;
      if(this.s_modalShow) {
        this.inputPicName = '';
        this.preSrc = '';
        this.files = "";
      }
    },
    closeClick () {
      this.anyClick()
      this.$emit('dialogCloseFn', this.dialogObj.title);
    },
    uploadChange(event) {
      let _isType = this.verifyForm.isImg(event.target.files[0].type.split('/')[1])
      if(event.target.files.length > 0 && _isType) {
        this.files = event.target.files[0];
        this.preSrc = window.URL.createObjectURL(this.files);
      } else {
        this.s_alert('请正确选择图片')
      }
      //解决上传文件或图片无法触发change事件
      event.srcElement.value = ""
    },
    upload() {
      this.$refs.upload_file.click();
    },
    uploadPic() {
			if(this.dialogObj.title === "新增图片") {
			  if(this.inputPicName == '' | this.files == ''){
          this.s_alert('有必选项没填')
          return
        }
        this.isDisable = true
        let formData = new FormData();
        formData.append('file', this.files);
        //上传到文件微服务
        pictureUpLoad(formData).then( res => {
          // 得到文件微服务返回的fileID对应storeId
          // fileID: "cebaca9a-bfc3-4f13-9a0d-90826f258154"
          let storeId = res.data.fileID;
          let data = {
            "storeId": storeId,
            "name": this.inputPicName,
            "createUserId": this.isLogin().userId//登陆用户的id
          };
          // return postAddPicture(data)
          return this.$axios.get(this.HOST + '/source/img/add'
            + '?storeId='
            + data.storeId
            + '&name='
            + data.name
            + '&createUserId='
            + data.createUserId,)
        })
        .then(res => {
          this.isDisableFn()
          this.$emit('dialogSuccessFn', this.dialogObj.title);
          this.s_logwrite("宫格配置-素材图片库","新增");
        }).catch(err => {
          this.isDisableFn()
          //console.log(err,'素材图片库-新增');
        })
      }
      else if(this.dialogObj.title === "修改图片") {
        if(this.inputPicName == ''){
          this.s_alert('有必选项没填')
          return
        }
        this.isDisable = true
        /**
         * url http://172.17.99.30:10014/api/jp-HCZZ-AdminWeb-app-ms/source/img/update
         *  ?id=6a49c548-0cc0-4686-9436-e927bc32eb36
         *  &storeId=857fbeef-b2fd-4dc1-83c3-22b65600af6e
         *  &name=%E7%AB%8B%E4%BD%93%E5%B7%A1%E6%8E%A7%E5%8B%A4%E5%8A%A1
         *  &updateUserId=zhoupeng
         */
        let storeId = '';
        //首先判断图片是否更改
        if(this.files == '') {//没有更改,storeId不变
          storeId = this.dialogObj.storeId;
          let data = {
            "id": this.dialogObj.id,
            "storeId": storeId,
            "name": this.inputPicName,
            "updateUserId": this.dialogObj.updateUserId
          };
          this.$axios.get(this.HOST +'/source/img/update'
            +'?id='
            +data.id
            +'&storeId='
            +data.storeId
            +'&name='
            +data.name
            +'&updateUserId='
            +data.updateUserId).then( res => {
            setTimeout(() => {
              this.isDisable = false
            },200)
            this.$emit('dialogSuccessFn', this.dialogObj.title);
            this.s_logwrite("宫格配置-素材图片库","修改");
          }).catch(err => {
            this.isDisableFn()
            //console.log(err,'素材图片库-修改');
          })
         /* updatePicture(data).then( res => {
            this.$emit('dialogSuccessFn', this.dialogObj.title);
          })*/
        }
        else {//有更改

          let formData = new FormData();
          formData.append('file', this.files);
          //上传到文件微服务
          pictureUpLoad(formData).then( res => {
            // 得到文件微服务返回的fileID对应storeId
            // fileID: "cebaca9a-bfc3-4f13-9a0d-90826f258154"
            let storeId = res.data.fileID;
            let data = {
              "id": this.dialogObj.id,
              "storeId": storeId,
              "name": this.inputPicName,
              "updateUserId": this.dialogObj.updateUserId
            };
            // return updatePicture(data)
            return this.$axios.get(this.HOST +'/source/img/update'
              +'?id='
              +data.id
              +'&storeId='
              +data.storeId
              +'&name='
              +data.name
              +'&updateUserId='
              +data.updateUserId).then( res => {
              // this.$emit('dialogSuccessFn', this.dialogObj.title);
            })
          })
          .then(res => {
            this.isDisableFn()
            this.$emit('dialogSuccessFn', this.dialogObj.title);
            this.s_logwrite("宫格配置-素材图片库","修改");
          }).catch(err => {
            this.isDisableFn()
            //console.log(err,'素材图片库-修改');
          })
        }
      }
      else if(this.dialogObj.title === "新增链接") {
			  if(this.inputPicName == '' | this.inputUrl == ''){
			    this.s_alert('有必选项没填')
          return
        }
        this.isDisable = true
        let data = {
          'name': this.inputPicName,
          'url': this.inputUrl,
          'createUserId': this.dialogObj.createUserId
        }
        this.$axios.get(this.HOST+'/source/link/add'
          +'?url='
          +data.url
          +'&name='
          +data.name
          +'&createUserId='
          +data.createUserId)
          .then( res => {
            this.$emit('dialogSuccessFn', this.dialogObj.title);
            this.isDisableFn()
            this.s_logwrite("宫格配置-素材链接库","新增");
          })
          .catch( err => {
            this.isDisableFn()
            //console.log(err);
          })
       /* addLink(data).then( res => {
          this.$emit('dialogSuccessFn', this.dialogObj.title);
        })*/
      }
      else if(this.dialogObj.title === "修改链接") {
        if(this.inputPicName == '' | this.inputUrl == ''){
          this.s_alert('有必选项没填')
          return
        }
        this.isDisable = true
        let data = {
          'id': this.dialogObj.id,
          'name': this.inputPicName,
          'url': this.inputUrl,
          'updateUserId': this.dialogObj.updateUserId
        }
        this.$axios.get(this.HOST+'/source/link/update?id='
          +data.id
          +"&name="
          +data.name
          +"&url="
          +data.url
          +"&updateUserId="
          +data.updateUserId)
          .then( res => {
            this.isDisableFn()
            this.$emit('dialogSuccessFn', this.dialogObj.title);
            this.s_logwrite("宫格配置-素材链接库","修改");
          })
          .catch( err => {
            this.isDisableFn()
            //console.log(err);
          })
        /*editLink(data).then( res => {
          this.$emit('dialogSuccessFn', this.dialogObj.title);
        })*/
      }
		},
    isDisableFn () {
      setTimeout(() => {
        this.isDisable = false
      },200)
    }
  },
  watch:{
    picDialogAddReviseShow: function() {
      /**
       * 当父组件的状态值改变的时候
       */
      this.anyClick()
    },
    dialogObj:{
      handler(val, oldVal){
        this.preSrc = val.src;
        this.inputPicName = val.placeholder;
        this.inputUrl = val.placeholderUrl;
      },
      deep: true
    },
    s_modalShow: function() {
      this.files = '';
    }
  }
}
</script>

<style lang="scss" scoped>
  .picture-swrapper {
    width: 50%;
  }
  .picture {
    margin-left: 40%;
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
    background-color: #29333d;
    .item-pic {
      width: 100%;
      max-width: 120px;
      max-height: 120px;
      border: 6px solid transparent;
    }
  }
</style>
